<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    body { text-align: center; }
    h1, h2 { margin: 5px auto; }
    button { margin: 5px 5px; min-width: 90px; }
</style>
</head>
<body onload="draw()">
    <h1>绘制三次贝塞尔曲线</h1>
    <h2>PS：点击4次绘制</h2>
    <div><button id="cl">清空</button><button id="pt">输出</button></div>
    <canvas id="canvas" width=1000 height=800 style="border: 1px solid #ccc;"></canvas>
    <div id="ot"></div>
<script>
    function draw() {
    
        var canvas = document.querySelector('#canvas');
        
        var box = canvas.getBoundingClientRect();
        
        var context = canvas.getContext('2d');  
        
        var cnt = 0, points = [];
        
        canvas.onclick = function(e) {
            cnt += 1;
            if(cnt <= 4) {
                var x = e.clientX - box.left * (canvas.width  / box.width);
                var y = e.clientY - box.top  * (canvas.height / box.height);
                points.push(x);
                points.push(y);   
                circle(x, y);  
                if(cnt === 4) flush();
            } else {   
                var p = points;
                var x = e.clientX - box.left * (canvas.width  / box.width);
                var y = e.clientY - box.top  * (canvas.height / box.height);            
                var distances = [ 
                    distance(x, y, p[0], p[1]), 
                    distance(x, y, p[2], p[3]),
                    distance(x, y, p[4], p[5]),
                    distance(x, y, p[6], p[7]),
                ];
                if(isMin(distances[0], distances)) updatePairArray(0, x, y, p);
                if(isMin(distances[1], distances)) updatePairArray(2, x, y, p);
                if(isMin(distances[2], distances)) updatePairArray(4, x, y, p);
                if(isMin(distances[3], distances)) updatePairArray(6, x, y, p);
                context.clearRect(0, 0, 1000, 800); 
                for(var i = 0; i < 4; ++i) { circle(p[i * 2], p[i * 2 + 1]); }
                flush(); 
            }
        };
       
        document.querySelector('#cl').onclick = function() {
            
            points = [];
            
            cnt = 0;
            
            context.clearRect(0, 0, 1000, 800);   
        };
        
        document.querySelector('#pt').onclick = function() {
            
            console.log(points);
            
            document.querySelector('#ot').innerHTML = '[' + points.toString() + ']';
        };
        
        var flush = function() {
        
            threeLine(); bezier();
        }
        
        var threeLine = function() {
           var p = points;
           context.beginPath();  
           context.moveTo(p[0], p[1]);  
           context.lineTo(p[2], p[3]);  
           context.lineTo(p[4], p[5]);  
           context.lineTo(p[6], p[7]); 
           context.strokeStyle = "black";  
           context.stroke();              
        };
        
        var bezier = function() {
           var p = points;
           context.beginPath();  
           context.moveTo(p[0], p[1]);  
           context.bezierCurveTo(p[2], p[3], p[4], p[5], p[6], p[7]);  
           context.strokeStyle = "red";  
           context.stroke();                 
        };
        
        var circle = function(x, y) {
            context.beginPath();
            context.arc(x, y, 2, 0, Math.PI * 2, true);
            context.closePath();
            context.fillStyle = "blue";
            context.fill();        
        };
        
        var distance = function(x1, y1, x2, y2) {
            
            return Math.abs(x1 - x2) + Math.abs(y1 - y2);
        };
        
        var isMin = function(val, vals) {
            
            return vals.findIndex(function(e) { return e < val; }) === -1;
        };
        
        var updatePairArray = function(index, x, y, arr) {
            
            arr[index] = x; arr[index + 1] = y;
        }
}
</script>
</body>
</html>